<template>
	<view class="Recharge-box">
		<u-navbar title="充值">
			<view slot="right" style="margin-right: 40upx;font-size: 40upx;font-weight: bold;margin-bottom: 30upx;" @click="getRouter">...</view>
		</u-navbar>
		<view class="Recharge-box-top">
			<u-row gutter="16">
				<u-col span="12">
					<view class="demo-layout bg-purple" style="font-weight: bold;">输入充值金额</view>
				</u-col>
				<u-col span="12">
					<u-form :model="form" ref="uForm">
						<u-form-item label="￥" prop="name">
							<u-input v-model="form.name" />
						</u-form-item>
					</u-form>
				</u-col>
			</u-row>
		</view>
		<view class="Recharge-box-auto">
			<u-row gutter="16">
				<u-col span="12">
					<view class="demo-layout bg-purple" style="font-weight: bold;">选择充值方式</view>
				</u-col>
				<u-col span="12">
					<view class="demo-layout bg-purple bg-purple1">如要开票，请选择对公账户</view>
				</u-col>
				<u-col span="12" style="margin-top: 10px;">
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio 
							@change="radioChange" 
							v-for="(item, index) in list" :key="index" 
							:name="item.name"
							:disabled="item.disabled"
						>
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-col>
			</u-row>
			<u-row gutter="16" style="border-top: 1px solid #E5E5E5;margin-top: 10px;padding-top: 20px;">
				<u-col span="12">
					<view class="demo-layout bg-purple" style="font-weight: bold;">上传付款凭证</view>
				</u-col>
				<u-row style="width: 100%;">
					<u-col style="display: flex;">
						<u-col span="8" style="padding: 0;">
							<view class="demo-layout bg-purple" style="color: #666666;">公司名:搜课网络</view>
							<view class="demo-layout bg-purple" style="color: #666666;margin: 15px 0;">对公账户:15854212135</view>
							<view class="demo-layout bg-purple" style="color: #666666;">开户银行:15854212135</view>
						</u-col>
						<u-col span="4" style="padding: 0;">
							<u-upload :action="action" :file-list="fileList" max-count="1"></u-upload>
						</u-col>
					</u-col>
				</u-row>
				<u-col span="12">
					<view class="demo-layout" style="color: #888888;margin-bottom: 20px;">请上传对公账户打款的付款凭证</view>
				</u-col>
			</u-row>
		</view>
		<view class="Recharge-box-bottom">
			<u-button type="primary">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: '',
				form: {
					name: '',
				},
				fileList: [
					
				],
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入你要充值的金额', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
				},
				list: [
					{
						name: '对公账户',
						disabled: false
					},
					{
						name: '个人账户',
						disabled: false
					},
					{
						name: '微信支付',
						disabled: false
					},
					{
						name: '支付宝支付',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 'orange',
			};
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>
<style>
	.Recharge-box-auto /deep/ .u-radio-group{
		width: 100%;
	}
	.Recharge-box-auto /deep/ .u-radio{
		position: relative;
		width: 100% !important;
		height: 40px;
	}
	.Recharge-box-auto /deep/ .u-radio:hover{
		font-weight: bold;
	}
	.Recharge-box-auto /deep/ .u-radio__label:hover{
		color: #0081F1;
	}
	.Recharge-box-auto /deep/ .u-radio__icon-wrap--circle{
		position: absolute;
		right: 0px;
	}
	.Recharge-box-auto /deep/ .u-radio__label{
		position: absolute;
		width: 100%;
		left: 0px;
	}
	.Recharge-box-top /deep/ .u-form-item--left{
		color: #666666;
		font-size: 50upx;
		flex: 0 !important;
	}
	.Recharge-box-top /deep/ .u-form-item__message{
		padding-left: 35px !important;
	}
</style>
<style lang="less" scoped>
	.Recharge-box{
		padding: 30upx;
		background-color: #F7FCFF;
		.Recharge-box-top{
			padding: 20upx;
			border-radius: 10px;
			background-color: #fff;
			.bg-purple1{
				color: #999999;
				margin-top: 15px;
			}
		}
		.Recharge-box-auto{
			padding: 20upx;
			margin-top: 10px;
			border-radius: 10px;
			background-color: #fff;
			.bg-purple1{
				color: #999999;
				margin-top: 10px;
			}
		}
		.Recharge-box-bottom{
			padding: 130upx 100upx;
		}
	}
</style>